<template>
  <div class="inventory">
    <el-button plain type="single-number" @click="showDialog()">
      {{ btnText }}
    </el-button>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="showDialogVisible"
      :before-close="handleClose"
      custom-class="revenue-code-number"
      width="63%"
    >
      <div class="el-dialog__body-bodys">
        <div class="ccui-advanced-search-wrapper ccui-clearfix">
          <el-search
            ref="search"
            :formProp="filter"
            @search="search"
            :isShow="isShow"
            @resetForm="resetForm"
          >
            <!-- 单行搜索 -->
            <template slot="search">
              <el-input
                v-model="filter.acceptanceName"
                clearable
                @blur="handleTrim('acceptanceName')"
                searchLabel="验收单名称"
                placeholder="请输入验收单名称模糊查询"
              ></el-input>
              <el-input
                v-model="filter.acceptanceNumber"
                clearable
                searchLabel="验收单编号"
                placeholder="请输入验收编号模糊查询"
              ></el-input>

              <el-select
                v-model="filter.acceptanceType"
                searchLabel="验收单类型"
                placeholder="请选择验收单类型查询"
              >
                <el-option label="按发货单验收" value="按发货单验收">
                </el-option>
                <el-option label="按订单验收" value="按订单验收"> </el-option>
                <el-option label="按合同验收" value="按合同验收"> </el-option>
              </el-select>
              <el-input
                v-model="filter.acceptor"
                searchLabel="验收人"
                clearable
                placeholder="请输入验收人模糊查询"
              ></el-input>
              <el-date-picker
                v-model="filter.compileDate"
                type="daterange"
                searchLabel="编制日期"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </template>
            <!-- 展开后多个搜索 -->
            <el-input
              v-model="filter.acceptanceName"
              clearable
              @blur="handleTrim('acceptanceName')"
              slot="searchItem89"
              searchLabel="验收单名称"
              placeholder="请输入验收单模糊查询"
            ></el-input>
            <el-input
              v-model="filter.acceptanceNumber"
              clearable
              slot="searchItem3"
              searchLabel="验收单编号"
              placeholder="请输入验收单编号模糊查询"
            ></el-input>

            <el-select
              v-model="filter.acceptanceType"
              slot="searchItem5"
              searchLabel="验收单类型"
              placeholder="请选择验收单类型查询"
            >
              <el-option label="按发货单验收" value="按发货单验收"> </el-option>
              <el-option label="按订单验收" value="按订单验收"> </el-option>
              <el-option label="按合同验收" value="按合同验收"> </el-option>
            </el-select>
            <el-input
              v-model="filter.acceptor"
              clearable
              slot="searchItem88"
              searchLabel="验收人"
              placeholder="请输入验收人模糊查询"
            ></el-input>
            <el-date-picker
              v-model="filter.compileDate"
              slot="searchItem83"
              type="daterange"
              searchLabel="编制日期"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-search>
        </div>
        <el-table
          :data="inventoryTableDatas"
          ref="inventoryMultipleTable"
          border
          :fit="true"
          max-height="800px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="序号" width="55">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item, index) in tableHeadOptions"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            width="200"
            :show-overflow-tooltip="true"
          />
          <!--                    <el-table-column label="操作" width="80" fixed="right">-->
          <!--                        <template slot-scope="{ row }">-->
          <!--                            <el-button size="mini" type="text" @click="handlecheck(row)"-->
          <!--                            >选择-->
          <!--                            </el-button-->
          <!--                            >-->
          <!--                        </template>-->
          <!--                    </el-table-column>-->
        </el-table>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="default-mini" @click="handleClose"
          >取 消
        </el-button>
        <el-button size="mini" type="primary-font-mini" @click="handleCheck"
          >确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listAcceptanceCert } from "../api/settlement-approval";
import { parseTime } from "@/basa/utils/index";

export default {
  name: "acceptListSelect",
  props: {
    btnText: {
      type: String,
      default: "选择"
    },
    dialogTitle: {
      type: String,
      default: ""
    },
    searchInputArr: {
      type: Array,
      default: () => []
    },
    tableHeadOptions: {
      type: Array,
      default: () => []
    },
    getTableList: {
      type: Function,
      default: Function
    },
    settlementForm: {
      type: Object
    }
  },
  data() {
    return {
      isShow: false,
      filter: {},
      showDialogVisible: false,
      inventoryForm: {},
      inventoryTableDatas: [],
      inventoryTotal: 0,
      inventoryPageNoCode: 1,
      inventoryPageSize: 20,
      inventoryTableData2: [],
      dialogSelectionCheckLine: []
    };
  },

  methods: {
    // 关闭弹框触发
    handleClose() {
      this.filter = {};
      this.showDialogVisible = false;
    },
    // 清空名称空格
    handleTrim(key) {
      this.$set(
        this.filter,
        key,
        this.filter[key].replace(/(^\s*)|(\s*)$/g, "")
      );
    },
    search(searchObj) {
      // 时间格式转换
      if (searchObj.compileDate && searchObj.compileDate.length > 1) {
        searchObj.compileDateStart = parseTime(
          Date.parse(searchObj.compileDate[0]),
          "{y}-{m}-{d}"
        );
        Date.parse(searchObj.compileDate[0]);

        searchObj.compileDateEnd = parseTime(
          Date.parse(searchObj.compileDate[1]),
          "{y}-{m}-{d}"
        );
      }
      delete searchObj.compileDate;

      // 验收类型转换
      switch (searchObj.acceptanceType) {
        case "按发货单验收":
          searchObj.acceptanceTypeCode = "1";
          break;
        case "按订单验收":
          searchObj.acceptanceTypeCode = "2";
          break;
        case "按合同单验收":
          searchObj.acceptanceTypeCode = "3";
          break;
      }

      this.getList(searchObj);
    },
    resetForm() {},
    showDialog() {
      if (this.settlementForm.contractCode == "") {
        this.$message({
          type: "warning",
          message: "请选择合同编号"
        });
        return;
      }
      this.showDialogVisible = true;
      this.getList();

      //   this.inventoryGetMcConcBill();
    },

    getList(search = {}) {
      listAcceptanceCert({
        reportInOrgId: this.settlementForm.reportInOrgId,
        contractNumber: this.settlementForm.contractCode,
        moduleType: "settlement",
          businessType: 1,
        ...search
      }).then(res => {
        this.inventoryTableDatas = res.data.data;
        this.inventoryTableDatas.forEach(item => {
          if (item.compileDate) {
            item.compileDate = item.compileDate.substring(0, 10);
          }
        });
      });
    },
    // inventoryGetMcConcBill() {
    //   let params = {
    //     pageNo: this.inventoryPageNoCode,
    //     pageSize: this.inventoryPageSize,
    //     ...this.inventoryForm
    //   };
    //   this.getTableList(params).then(res => {
    //     // this.inventoryTableDatas = res.data.data.rows;
    //     // this.inventoryTotal = res.data.data.recordsTotal;
    //     // this.inventoryPageNoCode = res.data.data.pageNo;
    //   });
    // },
    inventoryHandleCurrentChange(val) {
      this.inventoryPageNoCode = val;
      //   this.inventoryGetMcConcBill();
    },
    inventorySearch(searchData) {
      this.inventoryPageNoCode = 1;
      this.inventoryForm = searchData;
      //   this.inventoryGetMcConcBill();
    },
    inventorySelectTable(val) {
      this.inventoryTableData2 = val;
    },
    inventoryDeleteTable(e) {
      this.inventoryTableData2 = this.inventoryTableData2.filter(
        item => item.id !== e.id
      );
      let filterArr = this.inventoryTableData2.filter(item => item.id !== e.id);
      this.$refs.inventoryMultipleTable.clearSelection();
      filterArr.forEach(row => {
        this.$refs.inventoryMultipleTable.toggleRowSelection(row);
      });
    },
    inventoryConfirm() {
      this.showDialogVisible = false;
      this.$emit("confirm", this.inventoryTableData2);
    },
    handleCheck() {
      this.$emit("numrow", this.dialogSelectionCheckLine);
      this.$refs["inventoryMultipleTable"].clearSelection();
      this.showDialogVisible = false;
    },
    handleSelectionChange(selection) {
      this.dialogSelectionCheckLine = JSON.parse(JSON.stringify(selection));
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-table {
  /deep/ th {
    padding: 0;
    height: 36px;
    line-height: 36px;
  }

  .el-table__body {
    .cell {
      height: 36px;
      line-height: 36px;
    }
  }
}

.inventory {
  display: inline-block;

  & + .inventory {
    margin-left: 10px;
  }
}

/deep/ .revenue-code-number .el-dialog__body .el-dialog__body-bodys {
  .bodys-right {
    padding: 0;
    width: 400px;
  }
}

/deep/ .revenue-code-number .el-dialog__body {
  width: 96%;
}

/deep/ .el-table td,
.el-table th {
  padding: 0 !important;
}
/deep/ .el-col-8 {
  width: 33.33333%;
  margin-bottom: 10px;
}
/deep/ .el-search .el-searchs-box {
  width: 395px;
}
/deep/.el-search .el-date-editor.el-input,
.el-search .el-date-editor.el-input__inner,
.el-search .el-input-number,
.el-search
  .el-searchs-bottom-form
  .el-form-item
  .el-form-item__content
  .el-select {
  width: 108%;
}
/deep/ .el-button--mini {
  margin-left: 5px;
}
</style>
